<template>
  <div class="split-image-container" @click="toggleSplit">
    <div class="image" :class="{ split: isSplit }">
      <img :src="imageSrc" alt="Split Image" />
    </div>
    <div class="image" :class="{ split: isSplit }">
      <img :src="imageSrc" alt="Split Image" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSplit: false,
      imageSrc: '../../img/spit.jpg', // 替换为你的图片路径
    };
  },
  methods: {
    toggleSplit() {
      this.isSplit = !this.isSplit;
    },
  },
};
</script>

<style scoped>
.split-image-container {
  display: flex;
  overflow: hidden;
}

.image {
  flex: 1;
  transition: transform 0.5s ease;
}

.image img {
  width: 100%;
  display: block;
}

.image.split img {
  transform: translateX(-100%);
}

.image:nth-child(2).split img {
  transform: translateX(100%);
}
</style>
